<template>
  <div
    class="song-item"
    @click="
      $emit('update:music', { item, index });
      $emit('update:playlist');
    "
  >
    <!-- <div class="index">{{index}}</div> -->
    <div class="msg">
      <h5>
        {{ item.name }}
      </h5>
      <p>
        <span v-for="(ar, index) in result" :key="index">
          <template v-if="index"> / </template>{{ ar.name }}
        </span>
        <!-- <template v-if="item.album.name">{{item.album.name}}</template> -->
        <!-- <template v-if="item.al.name">{{item.al.name}}</template> -->
        -{{ album.name }}
      </p>
    </div>
    <div class="icon">
      <i
        class="iconfont icon-zanting"
        v-if="currentMusic && currentMusic.id === item.id"
        style="color: pink"
      >
      </i>
      <i class="iconfont icon-bofang" v-else></i>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item", "index", "currentMusic", "paused"],
  computed: {
    result() {
      if (this.item.ar) {
        return this.item.ar;
      } else if (this.item.artists) {
        return this.item.artists;
      } else {
        throw new Error("获取出错");
      }
    },
    album() {
      if (this.item.al) {
        return this.item.al;
      } else if (this.item.album) {
        return this.item.album;
      } else {
        return "1111";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.song-item {
  padding: 7px 0px 0px 0px;
  display: flex;
  border-bottom: 1px #f1f0f0 solid;
  p {
    font-size: 12px;
    color: rgb(146, 143, 143);
    margin-top: 5px;
  }
  .msg {
    flex: 1;
    padding-bottom: 5px;
    p,
    h5 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}
.alias-name {
  color: rgb(146, 143, 143);
}
.icon {
  padding-bottom: 5px;
  flex-basis: 44px;
  .iconfont {
    font-size: 22px;
    color: #ccc;
  }
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>